<template>
	<view>
		<view v-if="list.length > 0 && !isDrag" v-for="(item,i) in list" :class="className + ' ' + 'menu-node'" 
			
			:key="item.id"
			:data-menuid="item.id" :data-menupid="menuPid" :data-deep="item._deep" :data-level="item._level" :data-index="i">
			<view :style="{display:'flex','flex-direction':'column','justify-content':'center','height':itemHeight+'px'}">
				<slot :row="item" :$index="i"></slot>
				<!-- <view class="menu-row" @tap="isDrag ? sortFinished : false">
					<view class="node-item">
						<view class="node-item-title">
							{{item.name}}
							<image  style="height: 60rpx;width:60rpx;" @click="onIcon(item,'expand')" :src="item.expand ?'/static/arrow-bottom.png':'/static/arrow_black.png'" v-if="item.children.length > 0"></image>
						</view>
						<image  @click="onIcon(item,'edit')" src="/static/arrow_black.png" style="right:0;height: 60rpx;width:60rpx;"></image>
					</view>
				</view>  :style="{'padding-left':itemPaddingLeft + 'rpx'}"-->
			</view>
			<mxj-draggableTreeItem :key="item.no" :isDrag="isDrag" v-if="item.children&&item.children.length>0 && item._children_show" :upLoadDom="upLoadDom" :list="item.children" :menuPid="item.id" :itemHeight="itemHeight">
				<slot slot-scope="{row,$index}" :row="row" :$index="$index"></slot>
			</mxj-draggableTreeItem>
		</view>
		<view v-if="list.length > 0 && isDrag" v-for="(item,i) in list" :class="className + ' ' + 'menu-node'"
			v-show="list.length > 0 && isDrag && item.classify_name !== '临时分类'"
			
			:key="item.id"
			:data-menuid="item.id" :data-menupid="menuPid" :data-deep="item._deep" :data-level="item._level" :data-index="i"
			@touchstart.stop="menutree.touchstart"
			@touchend="menutree.touchend"
			@touchmove="menutree.touchmove"
			@moveover=" menutree.changeNode">
			<view :style="{display:'flex','flex-direction':'column','justify-content':'center','height':itemHeight+'px'}">
				<slot :row="item" :$index="i"></slot>
				<!-- <view class="menu-row" @tap="isDrag ? sortFinished : false">
					<view class="node-item">
						<view class="node-item-title">
							{{item.name}}
							<image  style="height: 60rpx;width:60rpx;" @click="onIcon(item,'expand')" :src="item.expand ?'/static/arrow-bottom.png':'/static/arrow_black.png'" v-if="item.children.length > 0"></image>
						</view>
						<image  @click="onIcon(item,'edit')" src="/static/arrow_black.png" style="right:0;height: 60rpx;width:60rpx;"></image>
					</view>
				</view> -->
			</view>
			<mxj-draggableTreeItem :key="item.no" :isDrag="isDrag" v-if="item.children&&item.children.length>0 && item._children_show" :upLoadDom="upLoadDom" :list="item.children" :menuPid="item.id" :itemHeight="itemHeight">
				<slot slot-scope="{row,$index}" :row="row" :$index="$index"></slot>
			</mxj-draggableTreeItem>
		</view>
	</view>
</template>
<script module="menutree" lang="renderjs">
	import mxjDraggableTreeItem from "./mxj-draggableTreeItem.vue"
	import {
		mxjBus
	} from "./bus.js"
	export default {
		components: {
			mxjDraggableTreeItem
		},
		props: {
			
			isDrag: {
				value: Boolean,
				default: false
			},
			upLoadDom: {
				value: Boolean,
				default: false
			}
		},
		data() {
			return {
				timer:null,
			};
		},
		methods: {
			touchstart: function(e) {
				//console.log(window.event)
				//console.log(e)
				//console.log(e.instance.$el)
				//console.log(e.target.dataset.item)
				//e.$el = window.event.target;
				//console.log(window.event)
				//console.log(e)
				//console.log(this.list)
				//this.list.push({name:"mxjlinux"})
				mxjBus.$emit('mxj-draggable-tree-dragstart', e);
			},
			touchend:function(e) {
				mxjBus.$emit('mxj-draggable-tree-dragend',e);
			},
			touchmove: function(e) {
				if(e.preventDefault) {
					e.preventDefault();
				}
				mxjBus.$emit('mxj-draggable-tree-dragmove',e)
			},
		},
		watch:{
			"upLoadDom":{
				handler:function(nval,oval){
					
				}
			}
		}
	}
</script>
<script>
	export default {
		name: "mxj-draggableTreeItem",
		props: {
			list: Array,
			className: {
				type: String,
				default: "menu-item"
			},
			itemHeight: {
				type:Number,
				default:100
			},
			itemPaddingLeft: {
				type:Number,
				default: 20
			},
			menuPid: {
				type:[String,Number],
				default:'0'
			}
		},
		watch: {
			list:{
				deep:true,
				handler:function(newValue, oldValue) {
					// console.log('子表更新了')
					this.$forceUpdate()
				}
			}
		},
	}
</script>

<style lang="scss">
	.menu-item {
		font-size: 1.15rem;
		// line-height: 100rpx;
		// border-bottom: 1px solid #eee;
		// &:last-child{
		// 	border-bottom: 0;
		// }
		background-color: #fff;
		.menu-row{
		// border-bottom: 1px solid #eee;
			&:last-child{
				border-bottom: 0;
			}
		}
	}
	.menu-row {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #eee;
			height: 100%;
			background-color:#fff;
		}
		.node-item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
		}
		.node-item-title{
			display: flex;
			align-items: center;
		}
	
/*未使用*/
	.menu-child {
		font-size: 0.9em;
		font-weight: normal;
	}
</style>
